<template>
  <div id="play">
    <div class="root">
      <audio
        v-show="false"
        ref="audio"
        :src="musicSrc"
        @timeupdate="playWithTime"
      ></audio>
      <div class="songBg" :style="{ backgroundImage: `url(${pic})` }"></div>
      <!-- <div class="shade"></div> -->

      <div class="i">
        <div class="topContent">
          <div class="info">
            <img :src="pic" alt="" class="avatar" />
            <div class="title">你知道这首歌居然被这样评论？</div>
          </div>
          <div class="openL">
            <span class="txt" @click="openDownload">打开看看</span>
            <img
              class="icn"
              src=""
            />
          </div>
        </div>
      </div>

      <div class="circleContainer" @click="playOrPauseM">
        <div class="circle">
          <div
            class="circle2"
            :class="{ rotate360: !playOrPause, pause: playOrPause }"
          >
            <img :src="pic" alt="" class="apic" />
          </div>

          <div class="playBtn" v-if="playOrPause"></div>
        </div>
      </div>

      <div class="songInfo3">
        <span class="songName">{{ songName }}</span>
        <span class="gap">-</span>
        <span class="author">{{ author }}</span>

        <div class="lyricArea" ref="lyricArea">
          <p
            ref="pp"
            :class="pIndex == index ? 'hightLight' : ''"
            v-for="(item, index) in lyric"
            :key="index"
          >
            {{ item }}
          </p>
        </div>
      </div>

      <div class="singThisSong">
        <img
          src="//s3.music.126.net/mobile-new/img/musicStreet.png?22227b514ca899d2759a388ffbac109b"
          alt=""
        />
      </div>

      <div class="footer_wrap">
        <div class="openKg">打开</div>
        <span class="download">下载</span>
      </div>
    </div>

    <div class="other" ref="other">
      <ul
        class="nav"
        @touchstart="downPull"
        @touchend="upPull"
        @touchmove="movePull"
      >
        <li
          :class="navActive == index ? 'active' : ''"
          @click="changeNav(index)"
          v-for="(item, index) in navItem"
          :key="index"
          ref="navItem"
        >
          <span class="txt">{{ item.title }}</span>
        </li>
      </ul>

      <div class="bottomContainer" ref="bottomContainer">
        <h2 class="s_title" ref="navT1" v-if="songMenu.length!=0">包含这首歌的歌单</h2>
        <ul class="songMenu"  v-if="songMenu.length!=0">
          <li v-for="(item, index) in songMenu" :key="index">
            <figure class="cover">
              <img :src="item.coverImgUrl" alt="" />
              <span class="count">{{ makeFriendly(item.playCount) }}</span>
            </figure>
            <h3 class="tit">{{ item.name }}</h3>
            <p class="sub">{{ "by " + item.creator.nickname }}</p>
          </li>
        </ul>
        <h2 class="s_title" ref="navT2">喜欢这首歌的也听</h2>

        <div class="listContainer">
          <a
            @click="play(item.id)"
            class="item"
            v-for="item in recSongs"
            :key="item.id"
          >
            <img :src="item.album.picUrl" alt="" />
            <div class="songContainer">
              <p class="songName2">
                {{ item.album.name }}
              </p>
              <p class="songInfo2">
                {{
                  (songInfo = getSinger(item.artists) + "-" + item.album.name)
                }}
              </p>
            </div>
            <div class="play2 idx"></div>
          </a>
        </div>
        <h2 class="s_title" ref="navT3" >精彩评论</h2>
        <div class="commentList">
          <div
            class="commentItem"
            v-for="(item, index) in commentList"
            :key="index"
          >
            <div class="headPhoto">
              <img :src="item.user.avatarUrl" alt="" />
            </div>
            <div class="commentInfo">
              <div class="commentHeader">
                <div class="user">
                  <span class="username">{{item.user.nickname}}</span>
                  <div class="time">{{getTime('yyyy年MM月dd日',item.time)}}</div>
                </div>
                <div class="like">
                  <span>{{item.likedCount}}</span>
                  <i>
                    <svg class="likeSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
                  </i>
                </div>
              </div>
              <div class="comment">{{item.content}}</div>
            </div>
          </div>
        </div>

        <div class="openWYY">打开云音乐查看更多精彩评论</div>
      </div>
    </div>
  </div>
</template>


<script>
import axios from "axios";

export default {
  data() {
    return {
      id: 0,
      pic: "",
      playOrPause: true,
      musicSrc: "",
      lyric: [],
      time: [],
      songName: "",
      author: "",
      pIndex: 0,
      navActive: -1,
      navItem: [
        {
          title: "相似歌曲"
        },
        {
          title: "精彩评论"
        },
      ],
      songMenu: [],
      recSongs: [],
      pushIsChange: false,
      startY: 0,
      moveY: 0,
      endY: 0,
      startB: 0,
      isUp: true,
      commentList: [],
    };
  },
  created() {
    let id = this.$route.query.id;
    this.id = id;
    // console.log(id);
    this.getSongInfo(this.id);
    this.getSong(this.id);
    this.getLyric(this.id);
    this.getSongMenu(this.id);
    this.getRecSongs(this.id);
    this.getComments(this.id);
  },
  methods: {
    openDownload(){
      this.$router.push({
        path:'download/download'
      })
    },
    getTime(fmt,time) {
      // author: meizz
      var d = new Date(time);
      var o = {
        "M+": d.getMonth() + 1, // 月份
        "d+": d.getDate(), // 日
        "h+": d.getHours(), // 小时
        "m+": d.getMinutes(), // 分
        "s+": d.getSeconds(), // 秒
        "q+": Math.floor((d.getMonth() + 3) / 3), // 季度
        S: d.getMilliseconds(), // 毫秒
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (d.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      return fmt;
    },
    getComments(id) {
      axios
        .delete("/api/comment/music?id=" + id + "&limit=10")
        .then((res) => {
          console.log(res);
          this.commentList = res.data.hotComments;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    downPull(e) {
      e.preven;
      this.pushIsChange = true;
      this.startY = e.targetTouches[0].pageY;
      this.startB = Number(
        this.$refs.other.style.bottom.substring(
          0,
          this.$refs.other.style.bottom.length - 2
        )
      );
      console.log(this.startB);
    },
    movePull(e) {
      if (this.pushIsChange) {
        this.$refs.other.style = "transition: none 0.2s ease-in 0s;";
        this.moveY = e.targetTouches[0].pageY - this.startY;
        if (
          (this.startB == 0 && this.moveY < 0) ||
          (this.startB == -618 && this.moveY <= -618)
        ) {
          this.$refs.other.style =
            "bottom:0px; transition: all 0.2s ease-in 0s;  background: rgba(255, 255, 255);";
          return true;
        }
        if (
          (this.startB == -618 && this.moveY > 0) ||
          (this.startB == 0 && this.moveY >= 618)
        ) {
          this.$refs.other.style =
            "bottom:-618px; transition: all 0.2s ease-in 0s;  background: rgba(255, 255, 255,.1);";
          this.isUp = false;
          return true;
        }
        console.log(this.moveY);
        //         if (this.startB <= 0 && this.moveY < 0) {
        //           return;
        //         }
        // if (this.startB <= -618 && this.moveY > 0) {
        //   this.$refs.other.style =
        //     "bottom:-618px; transition: all 0.2s ease-in 0s;  background: rgba(255, 255, 255);";
        //   return;
        // }

        console.log(this.moveY);

        var c = this.startB - this.moveY + "px";
        this.$refs.other.style.bottom = c;
        this.$refs.other.style =
          " bottom:" +
          c +
          "; transition: none 0.2s ease-in 0s ;  background: rgb(255, 255, 255);";
        this.isUp = true;
      }
    },
    upPull(e) {
      var a = this.navActive == -1 ? 0 : this.navActive;
      this.pushIsChange = false;
      console.log(a);

      if (this.moveY > 80) {
        // console.log("下拉");
        this.$refs.other.style =
          "bottom:-618px; transition: all 0.2s ease-in 0s ; background: rgba(255, 255, 255, 0.1);";
        this.navActive = -1;
      } else if (this.moveY > 0 && this.moveY <= 80 && this.isUp) {
        console.log("回上");
        this.$refs.other.style =
          "bottom:0px; transition: all 0.2s ease-in 0s; background:  rgb(255, 255, 255);";
        this.navActive = a;
      } else if (this.moveY < -60) {
        // console.log("上拉");
        this.$refs.other.style =
          " bottom: 0px; transition: all 0.2s ease-in 0s; background: rgb(255, 255, 255);";
        this.navActive = a;
      } else {
        // console.log("回下");
        this.$refs.other.style =
          "bottom:-618px; transition: all 0.2s ease-in 0s;  background: rgba(255, 255, 255,.1);";
        this.navActive = -1;
      }
    },
    play(id) {
      this.$router.push({ path: this.$route.path, query: { id: id } });
      this.$router.go(0);
    },
    getSinger(arr) {
      var str = "";
      for (const key in arr) {
        str += arr[key].name + "/";
      }
      return str.substring(0, str.length - 1);
    },
    getRecSongs(id) {
      axios
        .get("/api/simi/song?id=" + id)
        .then((res) => {
          console.log(res);
          this.recSongs = res.data.songs;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    makeFriendly(num) {
      if (num >= 10000) {
        num = Math.round(num / 1000) / 10 + "万";
      }
      return num;
    },
    getSongMenu(id) {
      axios
        .get("/api/simi/playlist?id=" + id)
        .then((res) => {
          console.log(res);
          this.songMenu = res.data.playlists;
          if(this.songMenu!=0){
        this.navItem.unshift(     {
          title: "相关歌单"
        })
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    changeNav(idx) {
      this.navActive = idx;
     switch(this.navItem[idx].title){
       case '相关歌单':
          this.$refs.navT1.scrollIntoView({
        behavior:'smooth'
      })
      break
       case '相似歌曲':
          this.$refs.navT2.scrollIntoView({
        behavior:'smooth'
      })
      break
       case '精彩评论':
          this.$refs.navT3.scrollIntoView({
        behavior:'smooth'
      })
      break
      
     }
  
    },
    getSongInfo(id) {
      axios
        .get("/api/song/detail?ids=" + id)
        .then((res) => {
          console.log(res);
          this.pic = res.data.songs[0].al.picUrl;
          this.songName = res.data.songs[0].name;
          this.author = res.data.songs[0].ar[0].name;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getSong(id) {
      axios
        .get("/api/song/url?id=" + id)
        .then((res) => {
          console.log(res);
          this.musicSrc = res.data.data[0].url;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getLyric(id) {
      axios
        .get("/api/lyric?id=" + id)
        .then((res) => {
          console.log(res);
          var lyric = res.data.lrc.lyric.split("\n");
          console.log(lyric);
          for (const key in lyric) {
            if (key == lyric.length - 1) return;
            var timeStr = lyric[key].substring(1, lyric[key].lastIndexOf("]"));
            this.lyric.push(
              lyric[key].substring(
                lyric[key].lastIndexOf("]") + 1,
                lyric[key].length
              )
            );
            var timeInt =
              parseFloat(timeStr.split(":")[0]) * 60 +
              parseFloat(parseFloat(timeStr.split(":")[1]).toFixed(3));
            this.time.push(timeInt);
          }
          console.log(this.time);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    playWithTime() {
      for (var i = 0; i < this.time.length; i++) {
        if (
          this.$refs.audio.currentTime >= this.time[i - 1] &&
          this.$refs.audio.currentTime < this.time[i]
        ) {
          this.$refs["pp"][i - 1].scrollIntoView({
            behavior: "smooth",
          });
          this.pIndex = i - 1;
          console.log(this.pIndex);
          if (i == this.time.length - 1) {
            this.$refs["pp"][0].scrollIntoView({
              behavior: "smooth",
            });

            this.playOrPause = true;
            this.pIndex = 0;
          }
        }
      }
    },
    playOrPauseM: function () {
      if (this.playOrPause) {
        //play
        this.$refs.audio.play();
        this.playOrPause = false;
      } else {
        //pause
        this.$refs.audio.pause();
        this.playOrPause = true;
      }
    },
  },
};
</script>

<style scoped>
.openWYY{
    margin-bottom: 40px;
text-align: center;

display: block;
    border: 1px solid #d8d8d8;
    border-radius: 50px;
    padding: 10px 0;
    font-size: 14px;
    color: #fff;
    line-height: 1;
    background-color: rgba(0,0,0,.12);
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 30px;
}
.comment{
      position: relative;
    color: #333;
    font-size: 15px;
    line-height: 22px;
    margin-top: 5px;
    font-weight: 400;
}
.likeSvg{
    vertical-align: middle;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    font-style: normal;

    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    line-height: 0;
    vertical-align: middle;
    cursor: pointer;
}
.time{
  font-size: 9px;
    color: #999;
}
.username{
  display: inline-flex;
        font-size: 14px;
    color: #666;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: auto;

}
.user{
  flex: auto;
    width: 0;
    font-size: 0;

}
.like{
      width: 65px;
    height: 22px;
    line-height: 22px;
    font-size: 11px;
    color: #999;
    -webkit-flex: none;
    -webkit-box-flex: 0;
    flex: none;
    text-align: right;
}
.commentHeader{
  display: flex;
flex-direction: row;
}
.commentInfo {
  position: relative;
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 11px;
  margin-right: 16px;
  flex: 1;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

.headPhoto {
  margin: 0 10px 0 16px;
  height: 35px;
  width: 35px;
  flex: noen;
}
.headPhoto > img {
  width: 100%;
  border-radius: 35px;
  height: 100%;
}
.commentItem {
  padding-top: 18px;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.shade {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 50%;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000);
}
.up {
  /* animation: showUp 1s;
  transition: none 0s ease 0s; */
  background: rgb(255, 255, 255);
  bottom: 0px;
  transition: all 0.2s ease-in 0s;
}
.down {
  background: rgba(255, 255, 255, 0.1);
  bottom: -618px;
  transition: all 0.2s ease-in 0s;
}

.lt-enter,
.lt-leave-to {
  opacity: 0;
}
@keyframes showDown {
  0% {
    transition: bottom(0);
  }
  100% {
    transition: bottom(-618px);
  }
}
@keyframes showUp {
  0% {
    transform: translate(0, -618px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.item > img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 3px;
  float: left;
  margin-right: 10px;
}
.item {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 3rem;
  display: block;
  line-height: 5rem;
  padding: 7px 6px 16px;
}

a .numC {
  color: #df3436;
}
.idx {
  float: left;
  line-height: 3rem;
  width: 10%;
  font-size: 17px;
  height: 100%;
  color: #999;
  text-align: center;
}
.songContainer {
  line-height: 1.5;
  text-align: left;
  height: 100%;
  width: 77%;
  float: left;
}
.listContainer .songName2 {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
  white-space: nowrap;
  word-break: normal;
  font-size: 17px;
  width: 100%;
  margin: 0;
}
.listContainer .songInfo2 {
  margin: 0;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  font-size: 12px;
  color: #888;
  width: 100%;
}
.play2 {
  float: right;
  width: 10%;
  height: 50%;
  transform: translateY(50%);
  background: url(img/play2.png) no-repeat;
  background-size: 1.8rem;
}

.sub {
  position: relative;
  padding: 0 19px 0 6px;
  color: hsla(0, 0%, 100%, 0.6);
  font-size: 12px;
  height: 20px;
  overflow: hidden;
  color: #999;
  padding: 0;
  margin: 0;
}
.tit {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  margin: 2px 0 -1px;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
}
.count {
  position: absolute;
  right: 5px;
  top: 2px;
  z-index: 3;
  padding-left: 13px;
  color: #fff;
  font-size: 12px;
  background-position: 0;
  background-repeat: no-repeat;
  background-size: 11px 10px;
  background-image: url();
}
.songMenu li:first-child {
  margin-left: 0;
}
.songMenu li {
  overflow: hidden;
  flex: 1;
  width: 1%;
  position: relative;
  margin-left: 10px;
}
.cover > img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.cover {
  border-radius: 4px;
  margin: 0;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}
.songMenu {
  padding: 0 16px;
  margin-top: 12px;
  display: flex;
}
.s_title {
  color: #333;
  font-weight: 700;
  padding-left: 16px;
  font-size: 17px;
  position: relative;
  line-height: 18px;
}
.bottomContainer {
  flex: 1;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  top: 5px;
  transition: all 0.2s ease-in;
  overflow-y: scroll;
}
.active .txt {
  color: #ff3a3a;
  border-bottom: 2px solid #ff3a3a;
}
.nav::after {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  content: "";
  display: block;
  width: 54px;
  height: 5px;
  border-radius: 5px;
  background: rgba(51, 51, 51, 0.1);
}
.nav li {
  flex: 1;
  text-align: center;
  height: 28px;
}
.nav {
  position: relative;
  z-index: 10;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  height: 58px;
  box-sizing: border-box;
  padding-top: 30px;
  width: 100%;
  /* background-color: #fff; */
  display: flex;
  width: 100%;
  border-radius: 24px 24px 0 0;
}
.other {
  z-index: 102;
  background: rgba(255, 255, 255, 0.1);
  
  /* background: #fff; */
  position: fixed;
  height: 678px;
  bottom: -618px;
  /* transition: all 0.2s ease-in 0s; */
  display: flex;
  width: 100%;
  border-radius: 24px 24px 0 0;
  flex-direction: column;
  overflow: hidden;
}
.openKg,
.download {
  flex: 1 1 12px;
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: 1px solid rgb(255, 58, 58);
  border-radius: 40px;
  font-size: 18px;
  text-align: center;
  background: #000;
  color: rgb(255, 58, 58);
  margin: 0 6px;
}
.download {
  color: #fff;
  border-radius: 40px;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;

  background-color: #ff3a3a;
}
.footer_wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 80px;
  z-index: 20;
  display: flex;
  padding: 0 10px;
  margin: 0 auto;
}
.singThisSong img {
  width: 100px;
  height: 25px;
  border-radius: 26px;
  border: 1px solid hsla(0, 0%, 100%, 0.13);
}
.singThisSong {
  margin-top: 15px;
  color: hsla(0, 0%, 100%, 0.6);
  height: 30px;
  line-height: 30px;
  position: absolute;
  display: flex;
  left: 0;
  right: 0;
  z-index: 20;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
}
.songInfo3 .lyricArea .hightLight {
  color: #fff;
}
.lyricArea p {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;

  margin: 0 auto;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  color: hsla(0, 0%, 100%, 0.6);
}
.lyricArea {
  overflow-y: scroll;
  margin-top: 14px;
  position: relative;
  line-height: 1.5;
  font-size: 16px;
  height: 82px;
  overflow: hidden;
  -webkit-mask: -webkit-linear-gradient(top, #000, #000 70%, rgba(0, 0, 0, 0));
}
.author {
  color: hsla(0, 0%, 100%, 0.6);
}
.songInfo3 {
  margin-top: 25px;
  position: relative;
  z-index: 20;
  text-align: center;
  font-size: 18px;
  line-height: 1.1;
  color: #fefefe;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pause {
 animation-fill-mode: forwards;

  animation-direction:alternate;
}
.playBtn {
  width: 65px;
  height: 65px;
  background-image: url(//s3.music.126.net/mobile-new/img/play_btn_3x.png?4da7e13…=);

  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10;
  background: url()
    0 0 no-repeat;
  background-size: contain;
}
.rotate360 {
 animation-fill-mode: forwards;
  animation: rotate360 20s linear 0.2s infinite;

}

@keyframes rotate360 {
  100% {
    
    transform: rotate(360deg);
  }
}
.apic {
  display: block;
  width: 178px;
  height: 178px;
  margin: 0 auto;
  transform: translateY(29%);
  border-radius: 50%;
  overflow: hidden;
  background: url(//s3.music.126.net/mobile-new/img/disc_default.png?ba7c53e…=)
    no-repeat;
  background-size: contain;
}
.circleContainer {
  padding-top: 115px;
}
.circleContainer::before {
  /* content: " ";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    background: url(http://s3.music.126.net/mobile-new/img/disc_light.png?2bb24f3fd11569809b817b4988f12bc7=) no-repeat;
    background-size: contain; */
}
.circleContainer::before {
  content: " ";
  position: absolute;
  width: 84px;
  height: 136px;
  top: 54px;
  left: 180px;
  background-image: url(//s3.music.126.net/mobile-new/img/needle-ab.png?4b81da0…=);
  background-size: contain;
  transform: rotate(-7deg);
  transform-origin: left top;
  z-index: 10;
}
.circle2 {
  width: 285px;
  height: 285px;
  position: relative;
  margin: 0 auto;
  z-index: 3;
  background: url(http://s3.music.126.net/mobile-new/img/disc.png?d3bdd1080a72129346aa0b4b4964b75f=)
    no-repeat;
  background-size: contain;
}
.circle {
  width: 285px;
  height: 285px;
  position: relative;
  margin: 0 auto;

  z-index: 3;
  background: url(http://s3.music.126.net/mobile-new/img/disc_light.png?2bb24f3fd11569809b817b4988f12bc7=)
    no-repeat;
  background-size: contain;
}
.icn {
  width: 6px;
}
.txt {
  margin-right: 5px;
}
.openL {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  padding: 4px 12px;
  font-size: 13px;
  color: #fff;
  text-align: center;
  border: 1px solid hsla(0, 0%, 92.9%, 0.2);
  border-radius: 9999px;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.title {
  text-align: left;
  margin: 0 8px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  color: #fff;
}
.avatar {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background-color: #eee;
}
.info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}
.topContent {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  padding: 9px 11px 10px 13px;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1000;
}
.i::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 98px;
  background-image: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
  pointer-events: none;
}
.topContent::after {
  content: "";
  display: block;
  height: 1px;
  background-color: hsla(0, 0%, 100%, 0.2);
  position: absolute;
  bottom: 0;
  left: -46%;
  margin: 0 11px 0 13px;
  right: 0;
  width: 186%;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
}
.root {
  position: relative;
  background-color: #ccc;
  height: 100%;
}

.songBg {
  height: 100%;
  width: 100%;
  transform: scale(1.5);
  transform-origin: center center;
  filter: blur(30px);

  background-color: #161824;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.songBg::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
#play {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}
</style>


